
class TabBarItem {
  icon: string;
  activeIcon: string;
  text: string;
  constructor(text, icon, activeIcon) {
    this.text = text
    this.icon = icon
    this.activeIcon = activeIcon
  }
}
class TabBars {
  tabs: TabBarItem[];
  current: number;



  constructor() {
    this.tabs = []
    this.current = 0;
  }

  contains(text: string): boolean {
    return this.tabs.some((v) => {return v.text === text});
  }
  add(text: string, icon: string, activeIcon: string) : boolean {
    if(this.contains(text)) 
      return false;
    this.pushItem(text, icon, activeIcon);
    return true;
  }
  remove(text: string) {
    let new_tabs = [];
    this.tabs.forEach((v) => {
      if(v.text !== text){
        new_tabs.push(v)
      }
    });
    this.tabs = new_tabs;
  }
  get(index: number) : TabBarItem {
    if(index >= 0 && index < this.length()){
      return this.tabs[index];
    }
    return null;
  }

  pushItem(text: string, icon: string, activeIcon: string) : TabBars {
    this.push(new TabBarItem(text, icon, activeIcon));
    return this;
  }
  push(item: TabBarItem) : TabBars{
    this.tabs.push(item);
    return this;
  }
  pop(): TabBarItem {
    return this.tabs.pop()
  }
  clear() {
    this.tabs = [];
  }
  length(): number {
    return this.tabs.length;
  }
  
  handleChange(index: number): void {
    this.current = index;
  }


}

interface TabBarMethods {
  tabBarChange(index: number) : void
}



class Data{
  tabs: TabBars;
  buttons: object[];
  terms: object[];

  isAgreeTerm: boolean;
  termDialogVisible: boolean;
  checkboxTipsVisible: boolean;
  isCountdownFinished: boolean;
}
interface Methods extends TabBarMethods {
  handleButtonTap(item?: any, index?:number, checked?:boolean, event?: Event): void;
  handleTermTap(item?: any, index?: number, event?: Event): void;

  showTermDialog(isShow: boolean): void;

  showTipsWithChecked(checked: boolean): void;
  handleCheckChange(checked: boolean): void;
  handleTermPrefixTap(checked: boolean): void;

  handleCountdownFinished(item?:any, index?:number, event?: Event): void;
}

Page<Data, Methods>({
  data: {
    tabs: new TabBars(),
    buttons: [
      { text: '同意', type: 'primary', countdownTime: 10},
      { text: '拒绝', aide: true, type: 'default' } ,
    ],
    terms: [
      { name: '《用户协议》', key: 'user' }
    ],

    isAgreeTerm: false,  // global flag for agreement
    termDialogVisible: false, //visible of term dialgo

    checkboxTipsVisible:true, //internal status
    isCountdownFinished: false, //internal status
  },
  showTipsWithChecked(checked: boolean): void {
    if(checked == false){
      this.setData({
        checkboxTipsVisible: true
      });
    }
    else{
      this.setData({
        checkboxTipsVisible: false
      });
    }
  },

  handleCountdownFinished(b, index, event): void {
    //my.showToast({ content: ` countdown finished `});
    this.data.isCountdownFinished = true;
  },
  handleCheckChange(checked: boolean){
    this.showTipsWithChecked(checked);
  },
  handleTermPrefixTap(checked: boolean) {
    this.showTipsWithChecked(checked);
  },
  handleButtonTap(item, index, checked, event) {
    my.showToast({ content: `点击了第 ${index + 1} 个按钮, ${checked}` });
    if(index == 0){ // confirm button
      if(this.data.isCountdownFinished
        && checked){
        this.data.isAgreeTerm = true;
        this.setData({
          termDialogVisible : false
        });
      }
      else{
        if(checked == false){
          my.showToast({ content: `请同意用户隐私政策` });
        }
        else{
          if(this.data.isCountdownFinished == false){
            my.showToast({ content: `请仔细阅读用户隐私政策` });
          }
        }
      }
    }
    else if (index == 1) { // rejuse button
      my.showToast({ content: `请仔细阅读用户隐私政策`});
    }
    else{
      console.error(`click button index:${index} error`);
    }
  },
  handleTermTap(item, index, event) {
    my.showToast({ content: `点击了第 ${index + 1} 个协议` });
  },
  tabBarChange(index) {
    this.data.tabs.handleChange(index);

    switch (index) {
      case 0: {
        break;
      }
      case 1: {
        let cur = this.data.tabs.get(index);
        if(cur.text == "激活"){
          //show scan ????
          console.log("this is active");
        }
        break;
      }
      case 2: {
        break;
      }
    }

    this.setData({
        tabs: this.data.tabs
    })
  },

  showTermDialog(isShow: boolean = true): void {
    this.setData({
      termDialogVisible: isShow,
    });
  },
  onLoad(query) {
    // 页面加载
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
    this.data.tabs
      .pushItem('动态码', 'AlipayCircleFill', 'AlipayCircleFill')
      .pushItem('激活', 'AddOutline', 'AddOutline')
      .pushItem('设置', 'StarOutline', 'StarFill')
      ;

    //TODO: load isAgreeTerm from storage
    /*
    let vst = VariableStorage<boolean>.load(Key)?.

    isAgreeTerm = vst.get(); //
    vst.set(isAgreeTerm);
    vst.save();

    VariableStorage<boolean>.save(key);
    */

    if(this.data.isAgreeTerm == false){
      this.showTermDialog(true);
    }

  },
  onReady() {
    // 页面加载完成
  },
  onShow() {
  },
  onUnload() {
    // 页面被关闭
  },
  onTitleClick() {
    // 标题被点击
  },
  onPullDownRefresh() {
    // 页面被下拉
  },
  onReachBottom() {
    // 页面被拉到底部
  },
  onShareAppMessage() {
    // 返回自定义分享信息
    return {
      title: 'My App',
      desc: 'My App description',
      path: 'pages/index/index',
    };
  },
});
